<!--index.art-->
{{extend './base.html'}}

{{block 'title'}}{{title}}{{/block}}

{{block 'head'}}
<link rel="stylesheet" href="/static/css/iconfont.css">
<link rel="stylesheet" href="/static/css/login.css">
{{/block}}

{{block 'content'}}
<div class="content login" id='app'>
	<div class="title">
		<h1>Red-Sample IOT Platform</h1>
	</div>
	<div class="login-form">
		<div class="username input-group">
			<span class="iconfont icon-username input-group-addon"></span>
			<input type="text" placeholder="username" class="form-control" v-model="username">
		</div>
		<div class="password input-group">
			<span class="iconfont icon-password input-group-addon"></span>
			<input type="password" placeholder="password" class="form-control" v-model="password" @keyup.enter='login'>
		</div>
		<div style="display: flex; justify-content: space-around;">
			<span class="btn-sm btn-primary" @click='login'>Login(登录)</span>
			<span class="btn-sm btn-warning" @click='reset'>Reset(重置)</span>
		</div>
	</div>
	<div class="logo">
		<a href="http://www.v5w.com"><img src="/static/img/logo.png" alt="威武网" class="v5w"></a>
	</div>

</div>
{{/block}}
{{block 'js'}}
<script src="/static/node_modules/vue/dist/vue.min.js"></script>
<script src="/static/node_modules/axios/dist/axios.min.js"></script>
<script src="/static/node_modules/js-cookie/src/js.cookie.js"></script>
<script>
	Cookies.set('token','')
</script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				msg: '',
				username: '',
				password: ''
			}
		},
		methods: {
			login() {
				if (!this.username) {
					alert('Please Input Username!')
				} else if (!this.password) {
					alert('Please Input Password!')
				}
				this.ajax()
			},
			ajax() {
				axios.post('/login', {
					username: this.username,
					password: this.password
				})
					.then(({ data }) => {
						console.log(data)
						if (data.code == 200) {
							Cookies.set('token', data.token)
							window.location.href='/red'
						}else{
							alert(data.msg)
						}
						
					})
					.catch(err => {
						console.log(err)
					})
			},
			reset() {
				this.username = ''
				this.password = ''
			}
		},
	})
</script>
{{/block}}